const axios = require('axios');

async function testComplexExport() {
    try {
        console.log('测试复杂HTML导出功能...');
        
        // 创建复杂的测试内容
        const testContent = {
            title: 'Vue.js 3.4 新特性详解与实战应用',
            content: `
                <h1>Vue.js 3.4 新特性详解与实战应用</h1>
                
                <p>Vue.js 3.4 是一个重要的更新版本，引入了多项令人兴奋的新特性和性能改进。本文将深入探讨这些新特性，并提供实际的应用示例。</p>
                
                <h2>主要新特性概览</h2>
                
                <p>Vue.js 3.4 版本带来了以下重要更新：</p>
                
                <ul>
                    <li><strong>响应式系统优化</strong>：提升了响应式数据的处理性能</li>
                    <li><strong>组合式API增强</strong>：新增了更多实用的组合式函数</li>
                    <li><strong>TypeScript支持改进</strong>：更好的类型推断和错误提示</li>
                    <li><strong>开发者工具升级</strong>：提供更强大的调试功能</li>
                </ul>
                
                <h2>响应式系统优化详解</h2>
                
                <p>在Vue.js 3.4中，响应式系统得到了显著优化。新的实现方式不仅提升了性能，还减少了内存占用。</p>
                
                <h3>性能提升示例</h3>
                
                <p>以下代码展示了新版本中响应式数据的使用方式：</p>
                
                <pre><code>
import { ref, computed, watch } from 'vue'

export default {
  setup() {
    // 响应式数据定义
    const count = ref(0)
    const message = ref('Hello Vue 3.4!')
    
    // 计算属性
    const doubleCount = computed(() => count.value * 2)
    
    // 监听器
    watch(count, (newValue, oldValue) => {
      console.log(\`Count changed from \${oldValue} to \${newValue}\`)
    })
    
    // 方法定义
    const increment = () => {
      count.value++
    }
    
    const updateMessage = (newMessage) => {
      message.value = newMessage
    }
    
    return {
      count,
      message,
      doubleCount,
      increment,
      updateMessage
    }
  }
}
                </code></pre>
                
                <h2>组合式API的新增功能</h2>
                
                <p>Vue.js 3.4 为组合式API添加了多个新的工具函数，使得开发更加便捷。</p>
                
                <h3>useStorage 示例</h3>
                
                <p>新增的 <code>useStorage</code> 函数可以轻松处理本地存储：</p>
                
                <pre><code>
import { useStorage } from '@vueuse/core'

export function useUserPreferences() {
  // 自动同步到 localStorage
  const theme = useStorage('theme', 'light')
  const language = useStorage('language', 'zh-CN')
  
  const toggleTheme = () => {
    theme.value = theme.value === 'light' ? 'dark' : 'light'
  }
  
  const setLanguage = (lang) => {
    language.value = lang
  }
  
  return {
    theme,
    language,
    toggleTheme,
    setLanguage
  }
}
                </code></pre>
                
                <h2>TypeScript 支持改进</h2>
                
                <p>Vue.js 3.4 在TypeScript支持方面做了重大改进，提供了更准确的类型推断和更好的开发体验。</p>
                
                <h3>类型安全的组件定义</h3>
                
                <pre><code>
import { defineComponent, PropType } from 'vue'

interface User {
  id: number
  name: string
  email: string
}

export default defineComponent({
  name: 'UserCard',
  props: {
    user: {
      type: Object as PropType<User>,
      required: true
    },
    showEmail: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    // TypeScript 现在可以正确推断 props 的类型
    const userName = computed(() => props.user.name)
    const userEmail = computed(() => 
      props.showEmail ? props.user.email : '***'
    )
    
    return {
      userName,
      userEmail
    }
  }
})
                </code></pre>
                
                <h2>实战应用场景</h2>
                
                <p>基于Vue.js 3.4的新特性，我们可以构建更高效、更易维护的应用程序。</p>
                
                <h3>构建现代化的待办事项应用</h3>
                
                <p>以下是一个完整的待办事项组件示例：</p>
                
                <pre><code>
<template>
  <div class="todo-app">
    <h1>{{ title }}</h1>
    
    <form @submit.prevent="addTodo">
      <input 
        v-model="newTodo" 
        placeholder="添加新任务..."
        class="todo-input"
      />
      <button type="submit" :disabled="!newTodo.trim()">
        添加
      </button>
    </form>
    
    <ul class="todo-list">
      <li 
        v-for="todo in filteredTodos" 
        :key="todo.id"
        :class="{ completed: todo.completed }"
      >
        <input 
          type="checkbox" 
          v-model="todo.completed"
          @change="updateTodo(todo)"
        />
        <span>{{ todo.text }}</span>
        <button @click="removeTodo(todo.id)" class="delete-btn">
          删除
        </button>
      </li>
    </ul>
    
    <div class="todo-stats">
      <p>总计: {{ todos.length }} | 已完成: {{ completedCount }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useStorage } from '@vueuse/core'

interface Todo {
  id: number
  text: string
  completed: boolean
  createdAt: Date
}

const title = ref('我的待办事项')
const newTodo = ref('')
const todos = useStorage<Todo[]>('todos', [])

const completedCount = computed(() => 
  todos.value.filter(todo => todo.completed).length
)

const filteredTodos = computed(() => 
  todos.value.sort((a, b) => 
    new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
  )
)

const addTodo = () => {
  if (!newTodo.value.trim()) return
  
  const todo: Todo = {
    id: Date.now(),
    text: newTodo.value.trim(),
    completed: false,
    createdAt: new Date()
  }
  
  todos.value.push(todo)
  newTodo.value = ''
}

const updateTodo = (todo: Todo) => {
  const index = todos.value.findIndex(t => t.id === todo.id)
  if (index > -1) {
    todos.value[index] = { ...todo }
  }
}

const removeTodo = (id: number) => {
  const index = todos.value.findIndex(todo => todo.id === id)
  if (index > -1) {
    todos.value.splice(index, 1)
  }
}

onMounted(() => {
  console.log('Todo应用已加载')
})
</script>
                </code></pre>
                
                <h2>性能优化建议</h2>
                
                <p>在使用Vue.js 3.4开发应用时，以下几点建议可以帮助您获得更好的性能：</p>
                
                <ul>
                    <li><strong>合理使用响应式数据</strong>：避免不必要的响应式转换</li>
                    <li><strong>优化组件结构</strong>：合理拆分组件，避免过度嵌套</li>
                    <li><strong>使用异步组件</strong>：对于大型组件，考虑使用懒加载</li>
                    <li><strong>利用缓存机制</strong>：合理使用computed和watch</li>
                </ul>
                
                <h2>总结与展望</h2>
                
                <p>Vue.js 3.4 是一个令人兴奋的版本，它不仅提升了性能，还改善了开发体验。通过新的响应式系统优化、增强的组合式API以及更好的TypeScript支持，开发者可以构建更加高效和可维护的应用程序。</p>
                
                <p>展望未来，Vue.js团队将继续致力于提升框架的性能和易用性。我们可以期待更多创新特性的加入，以及与现代前端生态系统的更深度集成。</p>
                
                <p>对于正在使用Vue.js的开发团队，建议尽快升级到3.4版本，以享受这些新特性带来的好处。同时，也要关注官方文档的更新，及时了解最佳实践和使用建议。</p>
            `
        };
        
        // 发送导出请求
        const response = await axios.post('http://localhost:3002/api/export-to-word', {
            content: testContent,
            filename: 'Vue3.4新特性详解.docx'
        });
        
        if (response.data.success) {
            console.log('✅ 复杂HTML导出成功！');
            console.log('文件路径:', response.data.filePath);
            
            // 检查文件大小
            const fs = require('fs');
            if (fs.existsSync(response.data.filePath)) {
                const stats = fs.statSync(response.data.filePath);
                console.log('文件大小:', Math.round(stats.size / 1024), 'KB');
            }
        } else {
            console.log('❌ 导出失败:', response.data.error);
        }
        
    } catch (error) {
        console.error('❌ 测试失败:', error.response?.data || error.message);
    }
}

testComplexExport();